<template>
  <el-dialog
    v-dialogDrag
    :visible="isVisible"
    title="用户列表"
    :close-on-click-modal="false"
    @close="handleClose"
    @closed="handleClosed"
  >
    <div
      v-loading="isLoading"
    >
      <el-form
        ref="formRef"
        class="form"
        :model="queryForm.data"
      >
        <el-form-item
          prop="name"
          label="用户名"
          class="form-item"
        >
          <el-input
            v-model="queryForm.data.name"
            placeholder="请输入用户名"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          class="form-item"
        >
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="handleQuery"
          >
            查 询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            @click="handleReset"
          >
            重 置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="tableRef"
        v-loading="table.isLoading"
        row-key="id"
        :data="table.dataArray"
        height="400"
        @selection-change="handleSelectionChange"
      >
        <!-- 多选框 -->
        <el-table-column
          reserve-selection
          type="selection"
          align="center"
          width="64"
        >
        </el-table-column>
        <!-- 序号 -->
        <el-table-column
          type="index"
          align="center"
          width="64"
        >
        </el-table-column>
        <el-table-column
          prop="code"
          label="工号"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="company"
          label="公司"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="department"
          label="部门"
          align="center"
          sortable
        >
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagination.number"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="pagination.size"
        :total="pagination.total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      >
      </el-pagination>
    </div>
    <div
      slot="footer"
    >
      <el-button
        @click="handleClose"
      >
        取 消
      </el-button>
      <el-button
        :loading="isLoading"
        type="primary"
        :disabled="isSubmitButtonDisabled"
        @click="handleSubmit"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * # 用户分配器
 * 用于给被勾选的角色分配被勾选的用户
 */
export default {
  'name': 'UserAllocator',

  'props': {
    /**
     * 设置`用户分配器`是否为加载状态
     * @type {Boolean}
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`用户分配器`是否为显示状态
     * @type {Boolean}
     */
    'isVisible': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`用户分配器`表格的分页信息
     *
     * 包括`页码`、`页面容量`和`数据总量`
     * @type {{
     *   'number': Number,
     *   'size': Number,
     *   'total': Number,
     * }}
     */
    'pagination': {
      'default' () {
        return {
          'number': 1,
          'size': 10,
          'total': 0,
        }
      },
      'type': Object,
    },
    /**
     * `用户分配器`的表格
     *
     * `table`: 用户数据组成的数组
     * `isLoading`: 设置`用户分配器`的表格是否为加载状态
     *
     * `table`里包括用户的`代码`、`公司名称`、`部门名称`和`用户名`
     *
     * 存在隐含的`id`属性用于数据操作，不显示
     * @type {{
     *   'dataArray': {
     *     'code': String,
     *     'company': String,
     *     'department': String,
     *     'id': String,
     *     'name': String,
     *   }[],
     *   'isLoading': Boolean,
     * }}
     */
    'table': {
      'default' () {
        return {
          'dataArray': [],
          'isLoading': false,
        }
      },
      'type': Object,
    },
  },

  'data' () {
    return {
      /**
       * `查询表单`
       */
      'queryForm': {
        'data': {
          'name': '',
        },
      },
      /**
       * 被勾选项组成的数组
       */
      'selectedRowArray': [],
    }
  },

  'computed': {
    /**
     * 设置`提交`按钮是否无效的计算属性
     *
     * 如果表格没有勾选任何行，则使其处于无效状态，使用户无法点击
     */
    'isSubmitButtonDisabled' () {
      return this.selectedRowArray.length === 0
    },
  },

  'methods': {
    /**
     * 处理对话框的关闭按钮和取消按钮点击事件
     */
    'handleClose' () {
      this.$emit('update:isVisible', false)
    },
    /**
     * 处理对话框的关闭动画结束事件
     */
    'handleClosed' () {
      this.$nextTick(() => {
        this.$refs.tableRef.clearSelection()
      })
    },
    /**
     * 处理表格的当前页码修改事件
     * @param {Number} pageNum 页码
     */
    'handlePageNumChange' (pageNum) {
      this.$emit('current-change', pageNum)
    },
    /**
     * 处理表格的页面容量修改事件
     * @param {Number} pageSize 页面容量
     */
    'handlePageSizeChange' (pageSize) {
      this.$emit('size-change', pageSize)
    },
    /**
     * 处理`查询`按钮的点击事件
     */
    'handleQuery' () {
      this.$emit('query', this.queryForm.data)
    },
    /**
     * 处理`重置`按钮的点击事件
     */
    'handleReset' () {
      this.queryForm.data = {
        'name': '',
      }
      this.$refs.formRef.resetFields()
    },
    /**
     * 处理表格行勾选事件
     * @param {Row[]} selectedRowArray 被勾选的表格行
     */
    'handleSelectionChange' (selectedRowArray) {
      this.selectedRowArray = selectedRowArray
    },
    /**
     * 处理`确定`按钮的点击事件
     */
    'handleSubmit' () {
      this.$emit('submit', this.selectedRowArray)
    },
  },
}
</script>

<style scoped lang="scss">
.form {
  display: flex;

  .form-item {
    display: flex;
    margin: 0 8px;
    width: 250px;
    height: 40px;
  }
}

</style>
